<template>
	<view class="pagebox flex-center">
		<view class="loginbox flex-column-center">
			<image src="../static/logo.png" mode="widthFix" class="logo"></image>
			<text class="logotext">方舟照片管理</text>
			
			<!-- <view class="locations flex-row ju-between">
				<view :class="['loca',type=='user'?'locaactive':'']" @click="type='user'">普通用户</view>
				<view :class="['loca',type=='mana'?'locaactive':'']" @click="type='mana'">管理员</view>
			</view> -->
			<template v-if="type=='user'">
				<div class="inputbox flex-row-center mb20">
					<input class="input flex1 ml30 flex-row-center" type="number" maxlength="11" placeholder="请输入手机号" placeholder-style="color:#c7c8c9;font-size:22rpx;" v-model="form.mobile"/>
				</div>
				<div class="inputbox flex-row-center mb20">
					<input class="input flex1 ml30 flex-row-center" type="text" maxlength="10" placeholder="请输入密码" placeholder-style="color:#c7c8c9;font-size:22rpx;" v-model="form.pass"/>
				</div>
			</template>
			<template v-if="type=='mana'">
				<div class="inputbox flex-row-center mb20">
					<input class="input flex1 ml30 flex-row-center" type="text" maxlength="20" placeholder="请输入账号" placeholder-style="color:#c7c8c9;font-size:22rpx;" v-model="mform.uname"/>
				</div>
				<div class="inputbox flex-row-center mb20">
					<input class="input flex1 ml30 flex-row-center" type="text" maxlength="10" placeholder="请输入密码" placeholder-style="color:#c7c8c9;font-size:22rpx;" v-model="mform.pass"/>
				</div>
				<view class="inputbox flex-row-center mb20">
					<input class="input flex1 ml30 flex-row-center" type="text" maxlength="10" placeholder="请输入验证码" placeholder-style="color:#c7c8c9;font-size:22rpx;" v-model="mform.vcode"/>
					<image :src="`data:image/png;base64,${codeimg}`" mode="widthFix" style="width: 180rpx;margin-right: 40rpx;" @click="getcode"></image>
				</view>
			</template>
			<button class="button base-bg w-color" :disabled="disabled" @click="loginsub">登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				disabled: false,
				form: {
					"mobile":"",
					"pass":""
				},
				mform:{
					"uname": "",
					"pass": "",
					"vcode": ""
				},
				type: 'user',
				codeimg: '',
			};
		},
		onLoad() {
			this.getcode()
		},
		methods: {
			getcode(){
				return new Promise((resolve, reject) => {
					this.$reQuest.post('manager/VerifyCode',{},{token: false}).then( async d=>{
						if(d.success&&d.msg){
							this.codeimg = d.msg.img
						}
					}).catch(err=>{})
				})
			},
			loginsub(){
				if(this.type=='user'){
					if(!this.form.pass){
						this.$c.Toast('请输入密码');
						return
					}
					if(this.form.mobile.length!=11){
						this.$c.Toast('手机号输入有误');
						return
					}
					this.login('mp/login',this.form);
				}else{
					if(!this.mform.uname){
						this.$c.Toast('请输入账号');
						return
					}
					if(!this.mform.pass){
						this.$c.Toast('请输入密码');
						return
					}
					if(!this.mform.vcode){
						this.$c.Toast('请输入验证码');
						return
					}
					this.login('manager/login',this.mform);
				}
			},
			login(url,f){
				this.disabled = true
				this.$reQuest.post(url,f,{token: false},).then(res=>{
						if(res.success){
							const loginData = {url: url, f: f, type: this.type}
							uni.setStorageSync('loginData',loginData)
							this.$c.setToken(res.msg.token);
							let user_ = this.$c.getUser()?JSON.parse(this.$c.getUser()):{};
							const user = {
								...user_,
								...res.msg,
								...loginData
							}
							this.$c.setUser(JSON.stringify(user));
							this.$c.Toast('登录成功');
							this.$c.go_url('/pages/index','reluanch')
						}else{
							this.disabled = false
							this.$c.Toast(res.err);
						}
				}).catch(err=>{this.disabled = false})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pagebox{
		width: 100vw;height: 100vh;background: linear-gradient( 86deg, #EBEEFD 0%,  #E7F3FE 30%, #E7F3FE 100%);
		.loginbox{
			width: 650rpx;height: auto;min-height: 300rpx;
			.logo{
				width: 240rpx;height: 240rpx;
			}
			.logotext{font-size: 32rpx;font-weight: bold;margin-top: 20rpx;margin-bottom: 100rpx;}
			.locations{
				margin-bottom: 60rpx;
				.loca{width: 220rpx;height: 60rpx;text-align: center;line-height: 60rpx;font-size: 26rpx;background: #f5f6f6;color: #666;}
				.locaactive{background: #4293f0;color: #fff;}
				.loca:nth-child(1){border-radius: 60rpx 0 0 60rpx;}
				.loca:nth-child(2){border-radius: 0 60rpx 60rpx 0;}
			}
			.button{
				width: 100%;height: 100rpx;border-radius: 100rpx;text-align: center;line-height: 100rpx;font-size: 26rpx;
			}
			.inputbox{
				width: 100%;height: 100rpx;border-radius: 100rpx;background: #fff;font-size: 26rpx;
			}
			.desc{font-size: 22rpx;color: #999;margin-top: 20rpx;}
			
			.xieyi{font-size: 24rpx;}
		}
	}
</style>
